<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="/static/index/cardList.css">
	<link rel="stylesheet" href="/static/index/swiper8/swiper-bundle.css">
	<script src="/static/index/swiper8/swiper-bundle.min.js"></script>
	<script src="/static/index/js/jquery-3.6.0.min.js"></script>
	<!-- 引入动画 -->
	<link rel="stylesheet" href="/static/index/AOS-animations/aos.css">
	<script src="/static/index/AOS-animations/aos.js"></script>
</head>
<body>
<div id="box">
	<!-- PC端导航栏开始 -->
	<div class="nav">
		<div class="navLogo"><img src="/static/index/img/logoTop.png" alt=""></div>
		<div class="navText">
			<ul>
				{foreach name="nav" item="v"}
				<a href="/hongguan/{$v.url}" target="_blank">
					<li>{$v.title}</li>
				</a>
				{/foreach}
			</ul>
		</div>
		<div class="placeholder"></div>
	</div>
	<div class="banner" data-aos="fade-right">
		<div class="swiper">
			<div class="swiper-wrapper">
				{foreach name="banner" item="v"}
				<div class="swiper-slide"><img src="{$v.image}"></div>
				{/foreach}
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
	</div>
	<div class="introAll">
		<div class="introductionNav">
			<div class="introductionNavAll">
				<div class="introductionNavAllTop">
					<p>快速导航</p>
					<p>Quick navgation</p>
				</div>
				<div class="introductionNavAllBottom">
					<p>红馆简介</p>
				</div>
			</div>
		</div>
	</div>
	<div class="introduction">
		<div class="introductionMore">
			<div class="jianjie">
				<div class="introductionMoreTop">
					<div class="introductionMoreTopText">
						<div class="moreList">
							<img src="/static/index/img/fanren.png" alt="">
						</div>
						<p>红馆简介</p>
					</div>
					<div class="introductionMoreTopMain">
						<ul>
							<li>当前位置： 首页|红馆简介</li>
							<li><input type="text" name="keyword"></li>
							<input type="image" src="/static/index/img/serch.png" border="0" alt="Submit" />
							<!--									<li><img src="../img/serch.png" alt=""></li>-->
						</ul>
					</div>
				</div>
				<div class="clover">
					<img id="listCard" src="/static/index/img/firstXuanzhong.png" alt="">
					<img id="listPictrue" src="/static/index/img/secondWeixuanzhpng.png" alt="">
					<img id="listText" src="/static/index/img/thirdWeixuanzhong.png" alt="">
				</div>



				<div class="show">
					<div class="introductionMain">
						{foreach name="articleEdu" item="v"}
						<div class="introductionMainBox">
							<img src="{$v.image}" alt="">
							<p>{$v.title}}</p>
							<p><img src="/static/index/img/zhong.png" alt="">2022-02-17</p>
						</div>

						{/foreach}
					</div>
				</div>



				<div class="hide">
					<div class="introductionMain">
						{foreach name ="articleEdu" item="v"}
						<div class="introductionMainBox">
							<div class="introductionImg">
								<img src="{$v.image}" alt="">
							</div>

							<div class="intromationText">
								<p>{$v.title}</p>
								<p>⌚{$v.createtime}</p>
							</div>
						</div>
						{/foreach}
					</div>
				</div>

				<!-- 文字列表 -->
				<div class="listText">
					<ul class="listContent">
						{foreach name="articleEdu" item ="v"}
						<li>
							<div class="listTextmain"><span></span>{$v.title}</div>
							<div class="listTextTime">{$v.createtime}</div>
						</li>
						{/foreach}
					</ul>
				</div>




				<div class="lookMore">
					<a href="#">查看更多></a>
				</div>
			</div>
		</div>
	</div>

	<div class="footer">
		<div class="main">
			<div class="footLogo">
				<img src="/static/index/img/logo_white.png" alt="">
			</div>
			<div class="footDetails">
				<div class="footText">
					<p>办公室</p>
					<p>|</p>
					<p>0539-5916215</p>
				</div>
				<div class="footText">
					<p>招生资讯</p>
					<p>|</p>
					<p>0539-5916215</p>
				</div>
				<div class="footText">
					<p>官网</p>
					<p>|</p>
					<p>www.sdcc.edu.cn</p>
				</div>
				<div class="footText">
					<p>邮箱</p>
					<p>|</p>
					<p>sdccxy@126.com</p>
				</div>
				<div class="footText">
					<p>校址</p>
					<p>|</p>
					<p>山东省烟台市高新区海天路1001号</p>
				</div>
			</div>
			<div class="footContack" id="weCat">
				<div class="wecat">
					<img src="/static/index/img/weCat.png" id="weCat" alt="">
					<p>官方微信</p>
				</div>
				<div class="microvlog" id="vlog">
					<img src="/static/index/img/weibo.png" id="vlog" alt="">
					<p>官方微博</p>
				</div>
			</div>
		</div>
		<div class="stop">
			Copyright O山东省城市服务技师学院版权所有
		</div>
	</div>
</div>
</body>
<img src="" alt="">
<script>

	$(document).ready(function() {
		$('#listCard').click(function() {
			var listCard = $(this).parent('.clover').siblings('.show')
			var listPictrue = $(this).parent('.clover').siblings('.hide')
			var listText = $(this).parent('.clover').siblings('.listText')

			var activeSE = $(this).siblings('#listPictrue')
			var activeTh = $(this).siblings('#listText')
			if (listCard.show()) {
				$(this).attr('src','/static/index/img/firstXuanzhong.png')
				activeSE.attr('src','/static/index/img/secondWeixuanzhpng.png')
				activeTh.attr('src','/static/index/img/thirdWeixuanzhong.png')

				listPictrue.hide()
				listText.hide()
			}
			// else {

			// }
		})

		$('#listPictrue').click(function() {
			var listCard = $(this).parent('.clover').siblings('.show')
			var listPictrue = $(this).parent('.clover').siblings('.hide')
			var listText = $(this).parent('.clover').siblings('.listText')

			var activeFi = $(this).siblings('#listCard')
			var activeTh = $(this).siblings('#listText')
			if (listPictrue.show()) {
				activeFi.attr('src','/static/index/img/firstWeixuanz.png')
				$(this).attr('src','/static/index/img/secondXuanzhong.png')
				activeTh.attr('src','/static/index/img/thirdWeixuanzhong.png')

				listCard.hide()
				listText.hide()
			}
			//  else {
			// 	listCard.show()
			// }
		})
		// listText
		$('#listText').click(function() {
			var listCard = $(this).parent('.clover').siblings('.show')
			var listPictrue = $(this).parent('.clover').siblings('.hide')
			var listText = $(this).parent('.clover').siblings('.listText')

			var activeFi = $(this).siblings('#listCard')
			var activeSE = $(this).siblings('#listPictrue')
			if (listText.show()) {
				$(this).attr('src','/static/index/img/thirdXuanzhong.png')
				activeFi.attr('src','/static/index/img/firstWeixuanz.png')
				activeSE.attr('src','/static/index/img/secondWeixuanzhpng.png')

				listCard.hide()
				listPictrue.hide()
			}
			// else {
			// 	listCard.show()
			// }
		})
	})

	// $(document).ready(function() {
	// 	$('#listPictrue').click(function() {
	// 		var listPictrue = $(this).parent('.clover').siblings('.hide')
	// 		if (listPictrue.is(':visible')) {
	// 			// 如果元素当前是可见状态，则隐藏它
	// 			listPictrue.slideUp();
	// 		} else {
	// 			// 如果元素当前是隐藏状态，则显示它
	// 			listPictrue.slideDown();
	// 		}
	// 	})
	// })

	// 移动端显示及隐藏导航栏
	// $(function() {
	// 	// 绑定按钮点击事件
	// 	$('#more').click(function() {
	// 		// 获取 div 元素
	// 		var more = $(this).siblings("ul");

	// 		if (more.is(':visible')) {
	// 			// 如果元素当前是可见状态，则隐藏它
	// 			more.slideUp();
	// 		} else {
	// 			// 如果元素当前是隐藏状态，则显示它
	// 			more.slideDown();
	// 		}
	// 	});
	// });



	// 轮播图开始
	var mySwiper = new Swiper('.swiper', {
		autoplay: {
			delay: 3000,
			stopOnLastSlide: false,
			disableOnInteraction: false,
		},
		effect: 'slide', //图片切换方式淡入
		loop: true, // 循环模式选项
		// 如果需要分页器
		pagination: {
			el: '.swiper-pagination',
			clickable: true, //点击分页器指示点可以切换banner图
		},
		// 如果需要前进后退按钮
		navigation: {
			clickable: true,
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	})
	// 轮播图结束
	$(document).ready(function() {
		$(".holdLeft").hover(function() {
			$(this).find(".overlay").css({
				display: "block"
			})
		}, function() {
			$(this).find(".overlay").css({
				display: "none"
			})
		})
	})

	$('.overlayNext').hide(); // 隐藏样式
	$(document).ready(function() {
		$(".societyContent").hover(function() {
			$(this).find(".overlayNext").css({
				display: "flex"
			})
		}, function() {
			$(this).find(".overlayNext").css({
				display: "none"
			})
		})
	})
	AOS.init({
		duration: 1200,
	})
	//显示隐藏微信和微博
	// $(document).ready(function() {
	//   $('.box').hover(
	//     function() {
	//       $(this).find('img').show();
	//     },
	//     function() {
	//       $(this).find('img').hide();
	//     }
	//   );
	// });
</script>
</html>